import React, { useState } from 'react'
import styles from './report.module.less'
import { formatNum, formatMoney } from '@/utils'
import { Dashboard } from '@/types/api'
// import api from '@/api'
import { useMount } from 'ahooks'
import { reportData } from '@/mock/report'

const ReportCards: React.FC = () => {
  const [report, setReport] = useState<Dashboard.ReportData>()
  useMount(async () => {
    // const data = await api.getReportData()
    setReport(reportData)
  })
  return (
    <div className={styles.report}>
      <div className={styles.card}>
        <div className='title'>司机数量</div>
        <div className={styles.data}>{formatNum(report?.driverCount)}个</div>
      </div>
      <div className={styles.card}>
        <div className='title'>总流水</div>
        <div className={styles.data}>{formatMoney(report?.totalMoney)}元</div>
      </div>
      <div className={styles.card}>
        <div className='title'>总订单</div>
        <div className={styles.data}>{formatNum(report?.orderCount)}单</div>
      </div>
      <div className={styles.card}>
        <div className='title'>开通城市</div>
        <div className={styles.data}>{formatNum(report?.cityNum)}座</div>
      </div>
    </div>
  )
}

export default React.memo(ReportCards)
